<script setup lang='ts'>
import listView from './list.vue';
import calenderView from '@/view/tasks/calendar.vue';
import { taskStore} from "@/store/modules/task.ts"
import dialogForm from "@/view/tasks/dialogForm.vue"
import { ref } from 'vue';
import { use } from 'echarts';

const useTaskStore = taskStore();
useTaskStore.getTaskList();
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-button-group>
          <el-button 
            :type="!useTaskStore.flag ? 'primary' : ''" 
            @click="useTaskStore.setFlag()"
          >
            日历模式
          </el-button>
          <el-button 
            :type="useTaskStore.flag ? 'primary' : ''" 
            @click="useTaskStore.setFlag()"
          >
            列表模式
          </el-button>
        </el-button-group>
      </el-header>
      
      <el-main>
        <component :is="useTaskStore.flag ? listView : calenderView" :taskList="useTaskStore.taskList" />
        <dialogForm v-if="useTaskStore.dialogFlag" />
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  background: #fff;
}
</style>